import { h, fragment } from '@knno/dom/jsx';
import { Input } from '../../../dist/jsx/input';
import { Textarea } from '../../../dist/jsx/textarea';
import { bar } from './index.css';
import Person from '@material-design-icons/svg/filled/person.svg';
import Settings from '@material-design-icons/svg/filled/settings.svg';

export function ShowInput() {
	return (
		<>
			<h2>输入框</h2>
			<div class={bar}>
				<Input placeholder="最多10个字符" maxLength={10} clearable oninput={() => console.log('on input ...')} />
				<Input readonly value="只读文本" prefixIcon={Person} />
				<Input type="password" clearable suffixIcon={Settings} prefixIcon={Person} />
				<Input type="text" placeholder="请输入" clearable />
				<Input type="date" />
				<Input type="time" />
				<Input type="text" label="前缀文字" prefixIcon={Person} clearable />
				<Input type="datetime-local" />
				<Input type="text" clearable suffixIcon={Settings} prefixIcon={Person} disabled value="禁用文字" />
				<Input type="text" invalid placeholder="请输入" value="无效文字" />
				<input type="color" />
			</div>
			<h2>输入框(移动端样式)</h2>
			<div class={bar}>
				<Input
					class="mobile"
					placeholder="最多10个字符"
					maxLength={10}
					clearable
					oninput={() => console.log('on input ...')}
				/>
				<Input class="mobile" readonly value="只读文本" prefixIcon={Person} />
				<Input class="mobile" type="password" clearable suffixIcon={Settings} prefixIcon={Person} />
				<Input class="mobile" type="text" placeholder="请输入" />
				<Input class="mobile" type="date" />
				<Input class="mobile" type="time" />
				<Input class="mobile" type="text" label="前缀文字" prefixIcon={Person} clearable />
				<Input class="mobile" type="datetime-local" />
				<Input
					class="mobile"
					type="text"
					clearable
					suffixIcon={Settings}
					prefixIcon={Person}
					disabled
					value="禁用文字"
				/>
				<Input class="mobile" type="text" invalid placeholder="请输入" value="无效文字" />
			</div>
			<h2>输入框</h2>
			<div class={bar}>
				<Textarea maxLength={30} placeholder="固定高度，最多30个字符" lines={3} resize="fixed" />
				<Textarea
					placeholder="自动高度"
					maxLines={8}
					value={
						'这是一段文字\n这是一段文字\n这是一段文字\n这是一段文字\n这是一段文字\n这是一段文字\n这是一段文字\n这是一段文字\n这是一段文字\n这是一段文字\n这是一段文字'
					}
				/>
				<Textarea placeholder="用户改变大小：4~10行" maxLines={10} lines={4} resize="manual" />
				<Textarea value="这是只读文本" maxLines={4} readonly />
				<Textarea value="这是禁用文本" maxLines={4} disabled />
			</div>
		</>
	);
}
